
function error(msg) {
    throw new Error(msg);
}

class Tab {
    cs = `<nav class="tab-title">
    <ul>
    </ul>
    <div class="tabadd">
      <span>+</span>
    </div>
  </nav>
  
  <div class="tab-content">
      </div>`
    constructor(str = error(请输入查询对象),data = [{title:'新闻', content: '这是一条新闻', active: true}, {title:'体育', content: '这是一条体育新闻'}]) {
        this.container = document.querySelector(str);
        this.container.classList.add("tabsbox");
        this.container.innerHTML = this.cs;
        this.data = data;
        this.count = this.data.length;
        this.ul = this.container.querySelector(".tab-title ul");
        this.contents = this.container.querySelector(".tab-content");
        // this.dbcontent = this.contents.classList.contains("conactive")
        this.tabadd = document.querySelector(".tabadd span");
        this.tabadd.addEventListener("click",(e) => this.add());
        this.contents.addEventListener("dblclick",(e) => this.xgcontent(e.target))
        this.render();
        this.myClick();
        
    }
    myClick() {
        this.ul.addEventListener("click",(e) => {//事件委托，不知道li到底有多少个，所以委托给它的父级
            const span = e.target.querySelector("span") || e.target;//防止鼠标点到li，而span不生效
            if(span.classList.contains("close")) {
                this.remove(span.previousElementSibling);
            }else if(span.classList.contains("edit")) {
                this.xg(span.parentNode);
            }else {
                this.toggle(span);
            }
        })
    }
    
    //渲染
    render() {
        this.data.forEach(item => {//因为用箭头函数this就是指向data的，而不是匿名函数那样谁调用就指向谁
            const li = document.createElement("li");
            li.className = (item.active?"liactive":"");
            li.innerHTML = `<span>${item.title}</span><span class="close">×</span
            ><span class="edit">改</span>`
            this.ul.appendChild(li);
            // console.log(this);
            const section = document.createElement("section");
            section.className=(item.active?"conactive":"");
            section.innerHTML = item.content;
            this.contents.appendChild(section);
        })
    }
    
    add() {
        this.count++;
        console.log("111");
        this.data.forEach(item => item.active=false);
        this.data.push({title:'新建选项卡' + this.count, content: '新增内容' + this.count, active: true});
        this.clear();
        this.render();
    }
    clear() {
        this.ul.innerHTML= "";
        this.contents.innerHTML = "";
    }

    toggle(target) {
        console.log(target);
        const data = this.data.find(item => item.title === target.innerText);
        if(!data ) return
        console.log("111");

        this.data.forEach(item => item.active=false);
        data.active = true;
        this.clear();
        this.render();
    }

    remove(target) {
        console.log(target);
        const index = this.data.findIndex(value => value.title === target.innerText);
        console.log(index);
        this.data.forEach(item => item.active=false);
        if(this.data.length>1) {
            if(index===0) {
                this.data[index+1].active = true;
            }else if(index>0) {
                this.data[index-1].active = true;
            }
        }else {
            
        }
        this.data.splice(index,1);
        this.clear();
        this.render();
    }

    xg(target) {
        console.log(target);
        let text = target.children[0].innerText;
        console.log(text);
        target.innerHTML = `<input type="text" value="${text}">`;
        const input = target.children[0];
        input.focus();
        input.select();
        input.onblur = () => {
            let inputText = input.value.trim();
            console.log(inputText);
            if(inputText === "" || inputText === text) {
                input.onblur = null;
                this.clear();
                this.render();
                return
            }
            const item = this.data.find(item => item.title === text);
            console.log(item);
            if(item) {
                item.title = inputText;
                console.log("222");
            }
            input.onblur = null;
            this.clear();
            this.render();
        }
    }

    xgcontent(target) {
        console.log(target);
        let text = target.innerText;
        console.log(text);
        target.innerHTML = `<textarea>${text}</textarea>`;
        let input = target.children[0];
        input.focus();
        input.select();
        input.onblur = () => {
            let inputText = input.value.trim();
            console.log(inputText);
            if(inputText === "" || inputText === text) {
                input.onblur = null;
                this.clear();
                this.render();
                return
            }
            const item = this.data.find(item => item.content === text);
            console.log(item);
            if(item) {
                item.content = inputText;
                console.log("222");
            }
            input.onblur = null;
            this.clear();
            this.render();
        }
    }
        

        

}